<template>
	
  <view class="content">
	<u-navbar :is-back="false" title="选择人员"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>  
	  
    <u-sticky style="height: 110upx;" bg-color="#F8F9FC">
      <view class="topsearch fff">
        <view class="search">
          <u-search placeholder="请输入搜索关键字" @change="keywordChange" :show-action="false" height="70"
            v-model="keyword"></u-search>
        </view>
      </view>
    </u-sticky>
    <view style="background: #f8f8f8; height:16upx ;"></view>
    <view class="goodslsit" v-for="(li,index) in clist" :key="index">
      <view  class="x-row" style="width: 100%;">
        <image :src="$api.UserImg(li.fId)" class="imgwid"></image>
        <view class="x-col righttext">
          <view class="titel">{{li.fName}}<text class="te1">销售</text><text
              class="te2">司机</text><text class="te1">库管</text></view>
          <view class="textre">电话：{{li.fTell}}</view>
        </view>
        <view class="x-col-center" >
					<checkbox-group  @change="checkChange($event,li)">
					<checkbox type="checkbox" :value="li.fId" v-model="li.checked" />
					</checkbox-group>
        </view>
      </view>
    </view>
    <view class="butbox" @click="suerSelect">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      query: 0,
      keyword: '',
      clist: [],
	  userid:0
    }
  },
  onLoad(e) {
    if (e.query) {
      this.query = e.query
    }
    this.init()
  },
  methods: {
    suerSelect() {
			let s= this.clist.filter(x=>x.checked)
      if (s.length == 0) {
        uni.showToast({
          title: '请选择人员',
          icon: 'none',
        })
        return
      }
      getApp().globalData.selectUserli =s
      uni.navigateBack({})
    },
    keywordChange() {
      this.getClist()
    },
    init() {
	// let userInfo = uni.getStorageSync('user_info')
	 // let userbase = userInfo.userbase
	// this.userid=userbase.fId 
	//  console.log(this.userid)
      this.getClist()
    },
    getClist() {
      let that = this
      let info = {
        UserType: 0,
        Key: this.keyword,
      }
      this.$axios('api/User/ListPaged', 'post', { value: info }).then((res) => {
        res.Value.forEach((x) => {
					x.fHeadPic = this.urlimg + x.fHeadPic; 
					x.checked = x.fchecked;
				})
        that.clist = res.Value
      })
    },
    checkboxGroupChange(e) {
      console.log(e)
    },
		checkChange(state,item){
			item.checked=Boolean(state.detail.value.length)
		//	 console.log(uni.getStorageSync('user_info'))
			// 	  console.log(this.userid)
		},
    checkboxChange(e) {
      console.log(e)
      //
      var that = this
      if (!e.value && this.clist[e.name].uid == uni.getStorageSync('userInfo').id) {
        setTimeout(function () {
          uni.showToast({
            title: '不能取消自己',
            icon: 'none',
          })
          that.clist[e.name].selected = true
        }, 50)
      }
    },
  },
}
</script>

<style scoped>
.topsearch {
  padding: 20upx 32upx;
}
.goodslsit {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32upx;
}
.goodslsit:last-child {
  border-bottom: 0;
}
.imgwid {
  width: 96upx;
  height: 96upx;
  display: block;
  border-radius: 60upx;
}
.righttext {
  padding-left: 25upx;
}
.titel {
  color: #333;
  font-size: 32upx;
  margin-bottom: 10upx;
}
.textre {
  color: rgba(25, 31, 37, 0.4);
  font-size: 28upx;
}
.butbox {
  position: fixed;
  bottom: 20upx;
  left: 10%;
  width: 80%;
  height: 85upx;
  background: #007aff;
  border-radius: 10upx;
  text-align: center;
  color: #fff;
  font-size: 32upx;
  line-height: 85upx;
}
</style>
